<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算器案例</title>
	</head>
	<body>
		<!-- 需求：要求用户输入2数字，要求做加法操作
			同时要求展现：总数：加法的和
			要求；
				1.输入第二个数字时回车触发
				2.指定一个计算的按钮
		 -->
		<div id="app">
			加	数:<input type="text" v-model="num1"/><br>
			被加数:<input type="text" v-model="num2" @keyup.enter="addNum"/>
			<button @click="addNum">计算</button><br>
			和：<span v-text="count"></span>
				<!-- {{count}} -->
		</div>	
		<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
		<script>
			const app = new Vue({
				el:'#app',
				data:{
					num1:'',
					num2:'',
					count:''
				},
				
				//定义vue对象中的方法
				methods:{
					enter(){
						alert("回车触发")
					},
					addNum(){
						//parseInt:将字符转换成数值类型
						this.count=parseInt(this.num1)+parseInt(this.num2)
					}
				}
				
			})
		</script>
	</body>
</html>
